<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500" style="border: 1px solid red;">
			
		</canvas>
	</body>
	<script type="text/javascript">
		function jianbian(){
			var canvas = document.getElementById("canvas");
			if(canvas.getContext){
				var context = canvas.getContext("2d");
				context.strokeRect(50,50,100,200);
				context.stroke();
			
				var rddt = context.createRadialGradient(150,150,50,150,150,100);
				rddt.addColorStop(0,"#000000");
				rddt.addColorStop(0.5,"#e42121")
				rddt.addColorStop(1,"#ffffff");
				context.fillStyle = rddt;
				context.fillRect(0,0,300,300);
		}
	}
		jianbian();
	</script>
	
</html>
